<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div>
          <span>选择</span>
          <el-select v-model="select"
            clearable
            @change="filterChange">
          </el-select>
        </div>

        <div :class="$style.search">
          <span>搜索</span>
          <el-input v-model="search"
            clearable
            @clear="filterChange"></el-input>
        </div>

        <el-date-picker :value="[]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"></el-date-picker>

        <el-button type="text"
          @click="filterChange">搜 索</el-button>
        <div space></div>
      </div>

      <el-table :data="tableData"
        m-b-10>
        <el-table-column v-for="(item, index) of tableColumns"
          :key="index"
          :label="item.label"
          :prop="item.prop"></el-table-column>
      </el-table>

      <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>
    </el-card>
  </div>
</template>

<script>
import BasePagination from '@/components/BasePagination'
import { views } from '@/mixins'

export default {
  

  components: {
    BasePagination
  },

  mixins: [views],

  data() {
    return {
      tableData: [],
      tableColumns: [
        {
          label: '部门',
          prop: ''
        },
        {
          label: '角色',
          prop: ''
        },
        {
          label: '姓名',
          prop: ''
        },
        {
          label: '手机号码',
          prop: ''
        },
        {
          label: '出生日期',
          prop: ''
        },
        {
          label: '家庭住址',
          prop: ''
        },
        {
          label: '入职时间',
          prop: ''
        }
      ],
      search: '',
      select: '',

      maxPage: 1,
      nowPage: 1
    }
  },

  watch: {
    nowPage() {
      this.getData()
    }
  },

  methods: {
    init(to, from) {
      this.getData()
    },

    getData() {},

    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    }
  }
}
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
